<!--下发管理-->
<template>
  <div class="listingPage">
    <div class="listingPage-menu">
      <el-form-item label="下发名称" prop="applyTitle">
        <el-input v-model="queryParams.keyword" placeholder="请输入下发名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="search">搜索</el-button>
      </el-form-item>
    </div>
    <el-table v-loading="loading" :data="templateData">
      <el-table-column label="序号" width="70" align="center" type="index" />
      <el-table-column label="下发名称" min-width="60" align="center" prop="name" />
      <el-table-column label="创建人" min-width="60" align="center" prop="creatorName" />
      <el-table-column label="开始时间" min-width="60" align="center" prop="startTime" />
      <el-table-column label="结束时间" min-width="60" align="center" prop="endTime" />
      <el-table-column label="操作" min-width="100" align="center">
        <template #default="scope">
          <el-popover placement="left" :width="400" trigger="hover" :teleported="false">
            <template #reference>
              <el-button link type="primary" icon="Download">导出</el-button>
            </template>
            <el-button link type="primary" icon="Download" @click="exportTheTable('users', scope.row.id)"
              >导出人员数据
            </el-button>
            <el-button link type="primary" icon="Download" @click="exportTheTable('replys', scope.row.id)"
              >导出已答复数据
            </el-button>
          </el-popover>
          <el-button link type="primary" icon="Clock" @click="adjustment(scope.row.id)">调整</el-button>
          <el-popconfirm title="是否确认向所有未提交人员发送催办邮件？" width="220" @confirm="reminders(scope.row.id)">
            <template #reference>
              <el-button link type="warning" icon="Bell">催办</el-button>
            </template>
          </el-popconfirm>
          <el-button link type="success" icon="View" @click="newPage(scope.row.id)">预览</el-button>
          <el-popconfirm title="是否确认删除当前已下发数据？" width="220" @confirm="deleteTemplate(scope.row.id)">
            <template #reference>
              <el-button link type="danger" icon="Delete">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="listingPage-pagination">
      <el-pagination
        :background="true"
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 30, 50]"
        :total="totalData"
        @change="search"
      />
    </div>
  </div>
  <!--调整弹窗-->
  <adjustmentPopUp v-model:dialogVisible="dialogVisible" :id="id" @search="search" />
</template>
<script setup>
import { EXPORT_CONFIGURATION_OBJECT } from "@/utils/mockConfiguration/mockConfig";
import dayjs from "dayjs";
import adjustmentPopUp from "@/components/popUpWidget/adjustmentPopUp.vue";
import { getEvaluation, delEvaluation, evaluationUrge } from "@/api/partyBuilding";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const router = useRouter();
//模版数据
const templateData = ref([]);
//加载状态加载中
const loading = ref(false);
//查询参数
const queryParams = ref({
  pageNum: 1, //当前页码
  pageSize: 10, //每页条数
  keyword: "", //搜索参数
});
//总条数
const totalData = ref(0);
/**
 * 催办
 * @param id 模板id
 */
const reminders = async id => {
  await evaluationUrge({ id });
  ElMessage.success("催办成功");
};
/**
 * 新开页面跳转
 * @param id 模板id
 */
const newPage = id => {
  const routeUrl = router.resolve({
    name: "allots",
    query: { id },
  });
  window.open(routeUrl.href, "_blank");
};
/**
 * 删除模板
 * @param id 模板id
 */
const deleteTemplate = async id => {
  //先删除模板，在重新查询最新下发列表。
  await delEvaluation(id);
  ElMessage.success("删除成功");
  //查询最新下发列表
  search();
};
/**
 * 查询列表页面
 * @returns {Promise<void>}
 */
const search = async () => {
  loading.value = true;
  const { rows, total } = await getEvaluation(queryParams.value);
  totalData.value = total;
  templateData.value = rows;
  loading.value = false;
};
/**
 * 刷新页面
 */
const handleVisibilityChange = () => {
  location.reload();
};
//调整弹窗状态
const dialogVisible = ref(false);
//当前调整弹窗id
const id = ref(null);
/**
 * 调整下发管理
 * @param rowId 模板id
 */
const adjustment = rowId => {
  id.value = rowId;
  dialogVisible.value = true;
};
/**
 * 导出数据
 * @param url 请求地址
 * @param id 模板id
 */
const exportTheTable = async (url, id) => {
  proxy.download(
    `/party/issued/export/${url}`,
    {
      id,
    },
    `${EXPORT_CONFIGURATION_OBJECT[url]}_${dayjs().format("YYYYMMDDHHmmss")}.xlsx`,
  );
};
onMounted(() => {
  search();
  document.addEventListener("visibilitychange", handleVisibilityChange);
});
onBeforeUnmount(() => {
  document.removeEventListener("visibilitychange", handleVisibilityChange);
});
</script>
<style lang="less">
@import "@/assets/styles/index.less";
</style>
<style lang="less" scoped>
:deep(.cell) {
  //导出按钮
  .el-tooltip__trigger:first-child {
    margin-right: 12px;
  }
}
</style>
